<!-- @format -->

<template>
  <div class="button-demo">
    <h2>按钮组件示例</h2>

    <!-- 基础用法 -->
    <div class="demo-section">
      <h3>基础用法</h3>
      <div class="demo-row">
        <CompButton>默认按钮</CompButton>
        <CompButton type="primary">主要按钮</CompButton>
        <CompButton type="success">成功按钮</CompButton>
        <CompButton type="info">信息按钮</CompButton>
        <CompButton type="warning">警告按钮</CompButton>
        <CompButton type="danger">危险按钮</CompButton>
      </div>
    </div>

    <!-- 朴素按钮 -->
    <div class="demo-section">
      <h3>朴素按钮</h3>
      <div class="demo-row">
        <CompButton plain>朴素按钮</CompButton>
        <CompButton type="primary" plain>主要按钮</CompButton>
        <CompButton type="success" plain>成功按钮</CompButton>
        <CompButton type="info" plain>信息按钮</CompButton>
        <CompButton type="warning" plain>警告按钮</CompButton>
        <CompButton type="danger" plain>危险按钮</CompButton>
      </div>
    </div>

    <!-- 圆角按钮 -->
    <div class="demo-section">
      <h3>圆角按钮</h3>
      <div class="demo-row">
        <CompButton round>圆角按钮</CompButton>
        <CompButton type="primary" round>主要按钮</CompButton>
        <CompButton type="success" round>成功按钮</CompButton>
        <CompButton type="info" round>信息按钮</CompButton>
        <CompButton type="warning" round>警告按钮</CompButton>
        <CompButton type="danger" round>危险按钮</CompButton>
      </div>
    </div>

    <!-- 圆形按钮 -->
    <div class="demo-section">
      <h3>圆形按钮</h3>
      <div class="demo-row">
        <CompButton circle>+</CompButton>
        <CompButton type="primary" circle>✓</CompButton>
        <CompButton type="success" circle>✓</CompButton>
        <CompButton type="info" circle>i</CompButton>
        <CompButton type="warning" circle>!</CompButton>
        <CompButton type="danger" circle>×</CompButton>
      </div>
    </div>

    <!-- 禁用状态 -->
    <div class="demo-section">
      <h3>禁用状态</h3>
      <div class="demo-row">
        <CompButton disabled>默认按钮</CompButton>
        <CompButton type="primary" disabled>主要按钮</CompButton>
        <CompButton type="success" disabled>成功按钮</CompButton>
        <CompButton type="info" disabled>信息按钮</CompButton>
        <CompButton type="warning" disabled>警告按钮</CompButton>
        <CompButton type="danger" disabled>危险按钮</CompButton>
      </div>
      <div class="demo-row">
        <CompButton plain disabled>朴素按钮</CompButton>
        <CompButton type="primary" plain disabled>主要按钮</CompButton>
        <CompButton type="success" plain disabled>成功按钮</CompButton>
        <CompButton type="info" plain disabled>信息按钮</CompButton>
        <CompButton type="warning" plain disabled>警告按钮</CompButton>
        <CompButton type="danger" plain disabled>危险按钮</CompButton>
      </div>
    </div>

    <!-- 文字按钮 -->
    <div class="demo-section">
      <h3>文字按钮</h3>
      <div class="demo-row">
        <CompButton type="text">文字按钮</CompButton>
        <CompButton type="text" disabled>文字按钮</CompButton>
      </div>
    </div>

    <!-- 不同尺寸 -->
    <div class="demo-section">
      <h3>不同尺寸</h3>
      <div class="demo-row">
        <CompButton size="large">大型按钮</CompButton>
        <CompButton>默认按钮</CompButton>
        <CompButton size="small">小型按钮</CompButton>
      </div>
      <div class="demo-row">
        <CompButton size="large" round>大型按钮</CompButton>
        <CompButton round>默认按钮</CompButton>
        <CompButton size="small" round>小型按钮</CompButton>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="demo-section">
      <h3>加载状态</h3>
      <div class="demo-row">
        <CompButton :loading="loading1" @click="handleLoading1"
          >加载中</CompButton
        >
        <CompButton type="primary" :loading="loading2" @click="handleLoading2"
          >加载中</CompButton
        >
        <CompButton type="success" :loading="loading3" @click="handleLoading3"
          >加载中</CompButton
        >
      </div>
    </div>

    <!-- 点击事件 -->
    <div class="demo-section">
      <h3>点击事件</h3>
      <div class="demo-row">
        <CompButton @click="handleClick">点击我</CompButton>
        <CompButton type="primary" @click="handlePrimaryClick"
          >主要按钮</CompButton
        >
      </div>
      <p v-if="clickMessage" class="click-message">{{ clickMessage }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import CompButton from './Index.vue'

  // 加载状态
  const loading1 = ref(false)
  const loading2 = ref(false)
  const loading3 = ref(false)

  // 点击消息
  const clickMessage = ref('')

  // 处理加载状态
  const handleLoading1 = () => {
    loading1.value = true
    setTimeout(() => {
      loading1.value = false
    }, 2000)
  }

  const handleLoading2 = () => {
    loading2.value = true
    setTimeout(() => {
      loading2.value = false
    }, 2000)
  }

  const handleLoading3 = () => {
    loading3.value = true
    setTimeout(() => {
      loading3.value = false
    }, 2000)
  }

  // 处理点击事件
  const handleClick = () => {
    clickMessage.value = '默认按钮被点击了！'
    setTimeout(() => {
      clickMessage.value = ''
    }, 3000)
  }

  const handlePrimaryClick = () => {
    clickMessage.value = '主要按钮被点击了！'
    setTimeout(() => {
      clickMessage.value = ''
    }, 3000)
  }
</script>

<style scoped>
  .button-demo {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .demo-section {
    margin-bottom: 30px;
  }

  .demo-section h3 {
    margin-bottom: 15px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
  }

  .demo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .click-message {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #f0f9ff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    color: #409eff;
    font-size: 14px;
  }

  h2 {
    color: #303133;
    margin-bottom: 30px;
    text-align: center;
  }
</style>
